<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <h1>The Goods Page</h1>
        <table>
            <thead>
            <tr>
                <th>id</th>
                <th>name</th>
                <th>remark</th>
                <th>createdTime</th>
            </tr>
            </thead>
            <tbody >
                <tr><td colspan="4">Data is loading...</td></tr>
            </tbody>
        </table>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function () {//jquery
            let url="goods/doFindGoods"
            $.getJSON(url,function (result) {
                console.log(result);
                doHandleQueryResponseResult(result);

            })
        })
        function doHandleQueryResponseResult(result){
            //1，获取tbody对象，并清空原有内容
            let tbody=$("tbody");//等效于document.querySelector("tbody");
            tbody.empty();//等效于tbody.innerHTML="";

            //2，迭代服务端响应的数据（result），并将数据追加到tbody中
            result.forEach(function (item) {
                /*let tr=$("<tr></tr>");
                tr.append(` <td>${item.id}</td>
                                <td>${item.name}</td>
                                <td>${item.remark}</td>
                                <td>${item.createdTime}</td>`);
                tbody.append(tr);

                 */

                tbody.append(`<tr>
                                <td>${item.id}</td>
                                <td>${item.name}</td>
                                <td>${item.remark}</td>
                                <td>${item.createdTime}</td>
                                </tr>`)


            })


        }

    </script>

</body>
</html>